import React, { useContext } from 'react';

import { innerUrls } from '@/shared/constants/urls';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals, ProfileTabVariants } from '@/shared/interfaces';
import { getProfileTabs } from '@/shared/lib/profileTab';
import { transformArrayIntoObject } from '@/shared/lib/transformArrayIntoObject';
import { useAppSelector } from '@/shared/store';
import { Button } from '@/shared/ui/Button';
import { useRouter } from 'next/router';

import { getUserProfile } from '../../model/selectors';
import cs from './Avatar.module.scss';

export const Nav = () => {
  const { isPremium } = useAppSelector(getUserProfile);
  const { openModal } = useContext(ModalContext);
  const router = useRouter();
  const handleMenuClick = (id: ProfileTabVariants | 'logout') => {
    if (id === 'logout') {
      openModal(Modals.ConfirmExitModal);
    } else {
      router.push(innerUrls.profile(id));
    }
  };
  return (
    <span className={cs.span}>
      {transformArrayIntoObject(getProfileTabs(isPremium)).map(({ title: item, id }) => (
        <Button
          className={cs.item}
          key={id}
          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
            e.stopPropagation();
            handleMenuClick(item.id);
          }}
        >
          {item.Logo}
          {item.Component}
        </Button>
      ))}
    </span>
  );
};
